<template>
	<a-drawer
		title="详情"
		:width="600"
		:visible="visible"
		:destroy-on-close="true"
		:body-style="{ paddingBottom: '80px' }"
		:footer-style="{ textAlign: 'right' }"
		@close="onClose"
	>
		<a-descriptions :column="1" size="middle" bordered class="mb-2">
			<a-descriptions-item label="主题">{{ formData.subject }}</a-descriptions-item>
			<a-descriptions-item label="发送时间">{{ formData.createTime }}</a-descriptions-item>
		</a-descriptions>
		<a-form ref="formRef" :model="formData" layout="vertical">
			<a-form-item label="内容：" name="content">
				<span>{{ formData.content }}</span>
			</a-form-item>
			<a-form-item label="查收情况：" name="receiveInfoList">
				<s-table
					ref="table"
					:columns="columns"
					:data="loadData"
					:alert="false"
					:showPagination="false"
					bordered
					:row-key="(record) => record.id"
				>
					<template #bodyCell="{ column, record }">
						<template v-if="column.dataIndex === 'read'">
							<span v-if="record.read" style="color: #d9d9d9">已读</span>
							<span v-else style="color: #ff4d4f">未读</span>
						</template>
					</template>
				</s-table>
			</a-form-item>
			<a-form-item label="附件：" name="attachments">
				<s-table
					ref="table"
					:columns="attachmentColumns"
					:data="loadAttachments"
					:showPagination="false"
					bordered
					:row-key="(record) => record.id"
				>
					<template #bodyCell="{ column, record }">
						<template v-if="column.dataIndex === 'action'">
							<a-popconfirm title="确定要删除吗？" @confirm="deleteFile(record)">
								<a-button type="link" danger size="small">删除</a-button>
							</a-popconfirm>
						</template>
					</template>
				</s-table>
			</a-form-item>
		</a-form>
	</a-drawer>
</template>

<script setup name="messageDetail">
	import messageApi from '@/api/dev/messageApi'
	import fileApi from '@/api/dev/fileApi'
	const attachments = ref([])
	const uploadFileIds = ref([])
	const receiveInfoList = ref([])
	const id = ref()
	// 默认是关闭状态
	let visible = $ref(false)
	const formRef = ref()
	// 表单数据
	const formData = ref({})
	const table = ref()
	const attachmentColumns = [
		{
			title: '文件名',
			dataIndex: 'name',
			ellipsis: true
		},
		{
			title: '大小',
			dataIndex: 'sizeInfo',
			ellipsis: true
		}
	]
	const columns = [
		{
			title: '姓名',
			dataIndex: 'receiveUserName'
		},
		{
			title: '是否已读',
			dataIndex: 'read',
			width: 120
		}
	]
	// 打开抽屉
	const onOpen = (record) => {
		visible = true
		id.value = record.id
	}
	const loadData = () => {
		return new Promise((resolve) => {
			messageApi.messageDetail({
				id: id.value
			}).then((data) => {
				formData.value = data
				uploadFileIds.value = data.fileIds
				table.value.refresh(true)
				// console.log('data.receiveInfoList=', data.receiveInfoList)
				resolve(data.receiveInfoList)
			})

		})
	}
	// 关闭抽屉
	const onClose = () => {
		receiveInfoList.value = []
		uploadFileIds.value = []
		visible = false
	}

	// 表格查询 返回 Promise 对象
	const loadAttachments = (parameter) => {
		if(uploadFileIds.value.length === 0) return new Promise((resolve)=> resolve([]))
		return fileApi.fileList(Object.assign(parameter, {
			fileIds:  uploadFileIds.value.join(',')
		})).then((data) => {
			// console.log('data=', data)
			attachments.value = data
			return data
		})
	}
	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>
